<script setup lang="ts">
import { ref } from 'vue'

const stats = ref({
  articles: 12,
  comments: 45,
  views: 1234,
  likes: 89
})

const timeRange = ref('month')

const recentActivities = ref([
  {
    type: '发表文章',
    title: '如何使用Vue3',
    time: '2小时前',
    icon: 'fa fa-file-text',
    color: '#1890ff'
  },
  {
    type: '回复评论',
    title: '在《Vue3教程》中',
    time: '4小时前',
    icon: 'fa fa-comment',
    color: '#52c41a'
  },
  {
    type: '写了日记',
    title: '今天的学习总结',
    time: '昨天',
    icon: 'fa fa-book',
    color: '#722ed1'
  }
])

const chartData = ref({
  views: [30, 40, 35, 50, 49, 60, 70, 91, 125],
  likes: [20, 30, 25, 40, 39, 50, 60, 81, 115]
})

const dateLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
</script>

<template>
  <div class="dashboard">
    <h2 class="title">仪表盘</h2>
    
    <!-- 统计卡片 -->
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-icon" style="background: #e6f7ff">
          <i class="fa fa-file-text" style="color: #1890ff"></i>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.articles }}</div>
          <div class="stat-label">文章</div>
        </div>
        <div class="stat-trend up">
          <i class="fa fa-arrow-up"></i>
          <span>12%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #f6ffed">
          <i class="fa fa-comments" style="color: #52c41a"></i>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.comments }}</div>
          <div class="stat-label">评论</div>
        </div>
        <div class="stat-trend up">
          <i class="fa fa-arrow-up"></i>
          <span>16%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #fff2e8">
          <i class="fa fa-eye" style="color: #fa8c16"></i>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.views }}</div>
          <div class="stat-label">浏览</div>
        </div>
        <div class="stat-trend down">
          <i class="fa fa-arrow-down"></i>
          <span>8%</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #fff0f6">
          <i class="fa fa-heart" style="color: #eb2f96"></i>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.likes }}</div>
          <div class="stat-label">获赞</div>
        </div>
        <div class="stat-trend up">
          <i class="fa fa-arrow-up"></i>
          <span>20%</span>
        </div>
      </div>
    </div>

    <div class="dashboard-row">
      <!-- 图表区域 -->
      <div class="chart-card">
        <div class="card-header">
          <h3>数据趋势</h3>
          <div class="card-extra">
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-content">
          <!-- 这里可以添加实际的图表组件 -->
          <div class="chart-placeholder">
            <div class="chart-lines">
              <div class="chart-line" v-for="(value, index) in chartData.views" :key="index"
                   :style="{ height: value + 'px' }">
              </div>
            </div>
            <div class="chart-labels">
              <span v-for="label in dateLabels" :key="label">{{ label }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="activity-card">
        <div class="card-header">
          <h3>最近活动</h3>
          <a class="view-all">查看全部</a>
        </div>
        <div class="activity-list">
          <div v-for="(activity, index) in recentActivities" 
               :key="index" 
               class="activity-item">
            <div class="activity-icon" :style="{ background: activity.color + '1A' }">
              <i :class="activity.icon" :style="{ color: activity.color }"></i>
            </div>
            <div class="activity-content">
              <div class="activity-title">
                {{ activity.type }}: {{ activity.title }}
              </div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 24px;
}

.title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1f1f1f;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.stat-trend {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  color: #52c41a;
}

.stat-trend.down {
  color: #ff4d4f;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.chart-card,
.activity-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.view-all {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.chart-content {
  padding: 24px;
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-lines {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 0;
}

.chart-line {
  flex: 1;
  background: linear-gradient(180deg, #1890ff 0%, rgba(24, 144, 255, 0.1) 100%);
  border-radius: 2px;
  transition: all 0.3s;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 12px;
}

.activity-list {
  padding: 16px 24px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  color: #1f1f1f;
  margin-bottom: 4px;
  font-size: 14px;
}

.activity-time {
  color: #999;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-container {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
  }
  
  .stat-value {
    font-size: 20px;
  }
}
</style> 